<template>
  <Layout>
    <div class="video-detail-page max-width-1500">
      <div class="header">
        <el-page-header 
          title="返回"
          content="视频详情"
          @back="goBack"
        />
      </div>

      <div class="video-detail" v-if="videoData">
        <div class="main-content">
          <div class="left-column">
            <div class="video-preview">
              <VideoPlayer
                v-if="videoData.video_file?.fileurl"
                :src="videoData.video_file.fileurl"
                :type="videoData.video_file.mimetype || 'video/mp4'"
                :poster="videoData.cover_image?.fileurl"
                :video-id="videoData.video_id"
              />
              <div v-else class="no-video">
                无法预览视频
              </div>
            </div>

            <div class="video-meta">
              <el-descriptions :column="2" border>
                <el-descriptions-item label="视频ID">{{ videoData.video_id }}</el-descriptions-item>
                <el-descriptions-item label="标题">{{ videoData.title || '无标题' }}</el-descriptions-item>
                <el-descriptions-item label="描述" :span="2">{{ videoData.description || '无描述' }}</el-descriptions-item>
                <el-descriptions-item label="作者">{{ videoData.author?.name || '未知' }}</el-descriptions-item>
                <el-descriptions-item label="创建时间">{{ formatDate(videoData.created_at || videoData.createdAt) }}</el-descriptions-item>
                <el-descriptions-item label="播放数">{{ videoData.play_count }}</el-descriptions-item>
                <el-descriptions-item label="点赞数">{{ videoData.like_count }}</el-descriptions-item>
                <el-descriptions-item label="评论数">{{ videoData.comment_count }}</el-descriptions-item>
              </el-descriptions>

              <div class="user-actions">
                <ShortVideoLike
                  :video="videoData"
                  @like-change="handleLikeChange"
                />
              </div>
            </div>
          </div>

          <div class="right-column">
            <!-- 评论功能 -->
            <div class="comment-section">
              <ShortVideoComment
                :video="videoData"
                @comment-change="handleCommentChange"
              />
            </div>
          </div>
        </div>
      </div>

      <div class="loading-container" v-else-if="loading">
        <el-skeleton animated>
          <template #template>
            <el-skeleton-item variant="image" style="width: 100%; height: 400px;" />
            <div style="margin-top: 20px;">
              <el-skeleton-item variant="text" style="width: 30%;" />
              <el-skeleton-item variant="text" style="width: 50%; margin-top: 10px;" />
              <el-skeleton-item variant="text" style="width: 70%; margin-top: 10px;" />
            </div>
          </template>
        </el-skeleton>
      </div>

      <div class="empty-container" v-else>
        <el-empty description="未找到视频数据" />
      </div>
      

    </div>
  </Layout>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getShortVideoById, deleteShortVideo, type ShortVideo } from '@/api/modules/shortVideo'
import Layout from '@/components/Layout.vue'
import VideoPlayer from '@/components/VideoPlayer.vue'
import ShortVideoLike from '@/views/Console/ShortVideoManagement/ShortVideoLike.vue'
import ShortVideoComment from '@/views/Console/ShortVideoManagement/ShortVideoComment.vue'

const route = useRoute()
const router = useRouter()

// 视频数据
const videoData = ref<ShortVideo | null>(null)

// 加载状态
const loading = ref(false)

// 编辑弹窗相关
const videoDialogVisible = ref(false)
const editingVideo = ref<ShortVideo | null>(null)

// 格式化日期
const formatDate = (dateString: string | undefined) => {
  if (!dateString) return '';
  const date = new Date(dateString);
  return date.toLocaleString('zh-CN');
};

// 返回上一页
const goBack = () => {
  router.push('/console/short-video-management')
}

// 获取视频详情
const fetchVideoDetail = async (videoId: number) => {
  loading.value = true
  try {
    const response = await getShortVideoById({ video_id: videoId })
    videoData.value = response.data || null
  } catch (error) {
    console.error('获取视频详情失败:', error)
  } finally {
    loading.value = false
  }
}

// 处理编辑视频
const handleEditVideo = () => {
  if (videoData.value) {
    editingVideo.value = videoData.value
    videoDialogVisible.value = true
  }
}

// 处理视频操作成功（编辑后）
const handleVideoSuccess = () => {
  videoDialogVisible.value = false
  // 重新获取视频详情
  if (videoData.value && videoData.value.video_id) {
    fetchVideoDetail(videoData.value.video_id)
  }
}

// 处理删除视频
const handleDeleteVideo = async () => {
  if (!videoData.value || !videoData.value.video_id) return
  
  ElMessageBox.confirm(
    `确定要删除视频"${videoData.value.title || '无标题'}"吗？此操作不可恢复！`,
    '确认删除',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    } as any
  )
  .then(async () => {
    try {
      await deleteShortVideo({ video_id: videoData.value!.video_id! })
      ElMessage.success('删除成功')
      // 返回列表页
      goBack()
    } catch (error) {
      console.error('删除视频失败:', error)
    }
  })
  .catch(() => {
    // 用户取消删除
  })
}

// 处理点赞数变化
const handleLikeChange = (likeCount: number) => {
  if (videoData.value) {
    videoData.value.like_count = likeCount
  }
}

// 处理评论数变化
const handleCommentChange = (commentCount: number) => {
  if (videoData.value) {
    videoData.value.comment_count = commentCount
  }
}

// 组件挂载时获取视频详情
onMounted(() => {
  const videoId = Number(route.params.id)
  if (videoId) {
    fetchVideoDetail(videoId)
  } else {
    goBack()
  }
})
</script>

<style scoped>
.video-detail-page {
  padding: 20px;
  background: white;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  height: 100%;
  overflow: auto;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.video-detail {
  height: calc(100% - 60px);
}

.main-content {
  display: flex;
  gap: 20px;
  height: calc(100%);
  overflow: auto;
}

.left-column {
  width: 70%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.right-column {
  width: 30%;
}

.video-preview {
  width: 75%;
}

.video-meta {
  width: 75%;
}

.user-actions {
  margin-top: 20px;
}

.comment-section {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.loading-container,
.empty-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
}

@media (max-width: 768px) {
  .main-content {
    flex-direction: column;
  }
  
  .header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .header-actions {
    align-self: flex-end;
  }
}
</style>